<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" >
    <title>登录</title>
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div class="login-container">
    <div class="login-panel">
        <div class="login-header">
            <p style="font-size: 14px;line-height: 65px;"><span><img src="../images/mjlogo.jpg" alt=""> | </span>肇源麻将<span> | </span></p>
        </div>
        <form id="loginForm" role="form" class="login-body" name="Form1">
            <div class="form-group field field-icon-right">
                <input id="username" name="username" type="text" class="form-control" placeholder="账号">
            </div>
            <div class="form-group">
                <input id="password" name="password" type="password" class="form-control" placeholder="密码">
            </div>
           <!-- <div class="form-group">
                <span>
                <input id="verify_code" name="checkcode" type="text" class="form-control verify-code-input"
                       placeholder="验证码" onkeydown="KeyDown()" maxlength="5">
                    <img id="imgyz" style="border: none;margin-left: -15px;visibility: hidden" src="../images/yxm_check_right.gif" alt="">
                    </span>

                <img  id="imagecode">

            </div>-->
            <div class="col-xs-8">
                <div class="checkbox icheck" style="position: relative;display: block;margin-top: 10px;margin-bottom: 10px;">
                    <label class="" style="min-height: 20px;padding-left: 20px;margin-bottom: 0; font-weight: 400;cursor: pointer;">
                        <div class="icheckbox_square-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input id="remember" type="checkbox" class="checked" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin-top: 6px; padding: 0px; background: rgb(255, 255, 255); border: 0px;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px;"></ins></div> 记住密码
                    </label>
                </div>
            </div>
            <a href="javascript:;" id="submit_button" type="button" class="" onkeydown="KeyDown()"  onclick="_hmt.push(['_trackPageview', '/virtual/login']);" >登录</a>
        </form>
    </div>
    <div class="flower-bg"></div>
</div>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/bootstrap.min.js"></script>
<script src="../js/lib/bootstrap-table.min.js"></script>
<script src="../js/lib/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/lib/jquery.validate.min.js"></script>
<script src="../js/signIn.js"></script>
<script src="../js/lib/jquery.cookie.js"></script>
<script type="text/javascript">

    window.onload = function () {
        $("#username").focus();
    }
    $(function () {
        //动态设置src的值
        $("#imagecode").attr('src',majiangurl+'imageCode?');
        $('#imagecode').click(function(){
            $(this).attr('src',majiangurl+'imageCode?random='+Math.random());
        });
        $("#loginForm").delegate("input","focus",function(){
            $(this).css("border-color","#75d77b");
            $(this).css("background-color","#FFFFCC");
        });
        $("#loginForm").delegate("input","blur",function(){
            $(this).css("border-color","#FFFFCC");
            $(this).css("background-color","");
        });
        if ($.cookie("rmbUser") == "true") {
            $("#rmbUser").attr("checked", true);
            $("#username").val($.cookie("userName"));
            $("#password").val($.cookie("passWord"));
        }
    });
    $("#loginForm").validate({
        rules: {
            username: {
                required: true
            },
            password: {
                required: true
            },
            checkcode: {
                required: false
            }
        },
        messages: {
            username: {
                required: "请填写帐号"
            },
            password: {
                required: "请输入密码"
            },
/*
            checkcode: {
                required: "请填写验证码"
            },
*/

        },
        errorElement: "em",
    });
    $("#verify_code").on("keyup", function () {
        if($("#verify_code").val()!=""){
            $.ajax({
                url: majiangurl + "login",
                dataType: "json",
                data: $('#loginForm').serialize(),
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                type: "post",
                success: function (data) {
                    if (data.status == '105') {
                        $("#imgyz").attr('src','../images/yxm_check_error.gif').css('visibility','visible');
                    } else {
                        $("#imgyz").attr('src','../images/yxm_check_right.gif').css('visibility','visible');
                    }
                },
            });
        }else{
            $("#imgyz").css('visibility','hidden')
        }

    });
    $("#submit_button").on("click", function () {
        if (!$("#loginForm").validate().form()) {
            return;
        } else {
            var username = $("#username").val();
            var password = $("#password").val();
            $.ajax({
                url: majiangurl + "login",
                dataType: "json",
                data: $('#loginForm').serialize(),
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                type: "post",
                success: function (data) {
                    if (data.status == '-102') {
                        //common.lightBox.showMessage("图片验证码错误，请重新输入");
                        alert("图片验证码错误，请重新输入");
                    } else {
                        if (data.status == '200') {
                            if ($("#remember").attr("checked") == true) {
                                $.cookie("rmbUser", "true", { expires: 7 }); // 存储一个带7天期限的 cookie
                                $.cookie("userName", username, { expires: 7 }); // 存储一个带7天期限的 cookie
                                $.cookie("passWord", password, { expires: 7 }); // 存储一个带7天期限的 cookie
                            } else {
                                $.cookie("rmbUser", "false", { expires: -1 });        // 删除 cookie
                                $.cookie("userName", '', { expires: -1 });
                                $.cookie("passWord", '', { expires: -1 });
                            }
                            window.location.href = "../index.html";
                        } else {
                            alert("用户名或密码错误,请重新输入!");
                        }
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("登陆失败");
                }
            });

        }
    });


    //点击登录,按回车登录
    function KeyDown() {
        if (event.keyCode == 13) {
            event.returnValue = false;
            event.cancel = true;
            $("#submit_button").click();
        }
    }
</script>
</body>
</html>